<template>
	<view class="result-list">
		<view class="result-item flex" v-for="(item, index) in listData" :key="index" @click.stop="gotoPage(item)">
			<image
				v-if="[resultType.SCENIC, resultType.TICKET, resultType.TRIP].includes(item.result_type)"
				:src="imgBaseUrl + 'search-type-scenic.png'"
				class="icon-32 type-img"
			/>
			<image
				v-else-if="item.result_type == resultType.ARTICLE"
				:src="imgBaseUrl + 'search-type-article.png'"
				class="icon-32 type-img"
			/>
			<image v-else :src="imgBaseUrl + 'icon-search.png'" class="icon-32 type-img" />

			<view class="ml-8 pl-8 pb-28 bd-bottom flex-1 space-between flex-a">
				<view class="mr-40">
					<view class="fs-28 font-500" v-html="highlightText(item?.name, searchKey)"></view>
					<view
						class="c-grey-86 mt-6 flex-a"
						v-if="![resultType.OTHER_1, resultType.OTHER_2, resultType.OTHER_3].includes(item.result_type)"
					>
						<text>{{ item?.result_type_name }} 类型{{ item.result_type }}</text>
						<view class="right-text" v-if="item.distance_in_meter">
							<text>距我 {{ distanceInKm(item.distance_in_meter) }}km</text>
						</view>
					</view>
				</view>
				<text class="arrow-right"></text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { pageToScenicDetail, pageToScenicList, pageToTicketDetail, pageToTripDetail } from "@/utils/page-redirect"
import { distanceInKm } from "@/mixins/mixins"

const imgBaseUrl = inject("imgBaseUrl")

defineProps({
	listData: {
		type: Array,
		default: [],
	},
	searchKey: {
		type: String,
		default: "",
	},
})

const resultType = {
	SCENIC: 10,
	TICKET: 20,
	TRIP: 30,
	ARTICLE: 40,
	OTHER_1: 50, // 名胜古迹列表
	OTHER_2: 60, // 线路列表
	OTHER_3: 70, // 达人笔记列表
}

// 高亮关键字
const highlightText = (text: string, searchKey: string) => {
	if (!text || !searchKey) {
		return text
	}
	const regex = new RegExp(searchKey, "gi") // 'g' 代表全局匹配，'i' 代表忽略大小写
	return text.replace(regex, (match) => `<span style="color: #BC8400;">${match}</span>`)
}
// 跳转到详情页
const gotoPage = (item: any) => {
	switch (item.result_type) {
		case resultType.SCENIC:
			pageToScenicDetail(item.id)
			break
		case resultType.TICKET:
			pageToTicketDetail(item.id)
			break
		case resultType.TRIP:
			pageToTripDetail(item.id)
			console.log("跳转到线路详情页")
			break
		case resultType.ARTICLE:
			console.log("跳转到文章详情页")
			break
		case resultType.OTHER_1:
			pageToScenicList({ name: item.name })
			console.log("跳转到景区列表页")
			break
		case resultType.OTHER_2:
			console.log("跳转到线路列表页")
			break
		case resultType.OTHER_3:
			console.log("跳转到达人笔记列表搜索")
			break
		default:
			break
	}
}
</script>
<style lang="scss" scoped>
.result-list {
	.result-item {
		width: 100%;
		padding-top: 28rpx;
		font-size: 24rpx;
		color: $c-black-1d;
		.bd-bottom {
			border-bottom: 1rpx solid $c-grey-e5;
		}
		.type-img {
			margin-top: 4rpx;
		}
	}
}
.right-text {
	position: relative;
	margin-left: 8rpx;
	padding-left: 8rpx;
	&:before {
		content: "";
		position: absolute;
		top: calc(50% - 7rpx);
		left: 0;
		width: 1rpx;
		height: 14rpx;
		background: #d8d8d8;
	}
}
</style>
